import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS, observe } from 'mobx';
import { Bubble , Button , WhiteSpace} from 'weaver-mobile';
import { withRouter, Route, Link } from 'react-router-dom';
import { TabPage,RouteLayout,Share } from 'weaver-mobile-page';
import { asyncComponent } from 'react-async-component';
import { getLabel } from '../../util/common';
import * as Utils from './assets/util';
import * as FLOWSET_API from '../../apis/flowset';


const subComs = {
    DetailSet: asyncComponent({
        resolve: () => import("./DetailSet")
    })
}

@inject('freeFlowSetStore')
@withRouter
@observer
export default class WfFreeFlowSet extends React.Component{
    componentDidMount() {
        document.title = "流转设定";
    }
    render(){
        const { history , params} = this.props;
        const { requestid = '' , workflowid = '' , nodeid = '' , formid = '' , isbill = '1'
         , isReadOnlyModel = 'false' ,isFree='1',isAllowNodeFreeFlow='0' , hasFreeNode} = params;
        /*
        const urlParams = {
            requestid : 4979318,
            workflowid : 26064,
            nodeid : 33215,
            formid : 2297,
            isbill : 1,
            isFromWfForm : true,
            isMobile:1,
            isReadOnlyModel : false,
            isFree : 1 ,
            isAllowNodeFreeFlow : 0,
        }*/
        let _isAllowNodeFreeFlow = '0';
        if(isFree=='0' && hasFreeNode){
            _isAllowNodeFreeFlow = '1';
        }
        const urlParams = {
            requestid,
            workflowid,
            nodeid,
            formid,
            isbill,
            isFromWfForm : true,
            isReadOnlyModel,
            isFree,
            isAllowNodeFreeFlow:_isAllowNodeFreeFlow,
            isMobile : '1',
        }
        return (
            <div className='free-flow-set'>
                <div className='flow-set-header'>流转设定</div>
                <div className='flow-set-content'>
                    <iframe id={'mobile-freeFlow'} className="designer-frame" src={`/workflow/workflowDesign/m-readOnly.html?${Utils.buildUrlStr(urlParams)}`}/>
                </div>
                <div className='flow-set-bottom'>
                    <Button type="primary" onClick={this.saveDatas}>保存设置</Button>
                </div>
                {this.goToDetail()}
            </div>
        )
    }
    /**
    params:detailType 
    value:
        node - 节点属性
        branch - 分支属性
        other ...
    */
    goToDetail = (detailType = 'node') =>{
        let routes = [];
        routes.push(<Route 
            key={'random'}
            path={`/req/wfFreeFlowSet/detail`} 
            render={() =>{
                return <RouteLayout>
                    <div className="wm-route-layout"><subComs.DetailSet/></div>
                </RouteLayout>
            }}>
        </Route>);
        return routes;
    }
    saveDatas = () => {
        const { freeFlowSetStore } = this.props;
        const { currentDatas = {} } = freeFlowSetStore;
        const { pcPublicFreeStore} = currentDatas;

        let iframe = window.document.getElementById('mobile-freeFlow').contentWindow;
        const func = iframe.wfFreeFlowToMobileUtils.getAllFreeDatas_mobile;
        let allFreeDatas = func(pcPublicFreeStore);
        console.log(allFreeDatas,'allFreeDatas')
        if(allFreeDatas){
            FLOWSET_API.saveFreeNodeInfo(allFreeDatas).then((result = {}) => {
                console.log(result,'result')
                Bubble.success('保存成功！');
            });
        }
    }
}